<template>
  <div class="box">
    <!-- 登录 -->
    <main>
      <h2>登录账号</h2>
      <p>虾米 - 严选商城欢迎您</p>
      <input type="text" placeholder="手机号码" />
      <input type="password" placeholder="密码" />
      <button>登录</button>
      <p>忘记密码</p>
      <p>
        <span>还没有注册？</span>
        <span> 立即注册</span>
      </p>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 12.3458rem; //617.29
  padding: 0.35rem;
  main {
    border: 0.01rem solid #f5f5f5;
    border-radius: 0.1rem;
    height: 11.5958rem; //579.79
    font-size: 0.288rem; //14.4
    box-sizing: border-box;
    padding: 0.6rem;
    h2 {
      font-weight: 400;
      color: #666;
    }
    p:nth-of-type(1) {
      margin: 0.5rem 0;
      color: #909090;
    }
    p:nth-of-type(2) {
      margin: 0.5rem 0;
      color: #989898;
      font-size: 0.2rem;
      text-align: center;
    }
    p:nth-of-type(3) {
      text-align: center;
      color: #549ff9;
    }
    input {
      width: 100%;
      height: 1rem;
      border: 0;
      background: #f5f5f5;
      border-radius: 0.1rem;
      text-indent: 1em;
      margin-bottom: 0.4rem;
    }
    button {
      background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
      border: 0;
      color: #fff;
      width: 4.1826rem; //209.13
      height: 1rem;
      border-radius: 0.1rem;
      text-align: center;
      margin: 0 auto;
      display: block;
      box-shadow: 0 0.1rem 0.1rem #ccc;
    }
  }
}
</style>
